import React from 'react';
import type {FormProps} from 'antd';
import {Button, Form, Input} from 'antd';

type FieldType = {
    username?: string;
    password?: string;
    remember?: string;
};

const onFinish: FormProps<FieldType>['onFinish'] = (values) => {
    console.log('Success:', values);
};

const onFinishFailed: FormProps<FieldType>['onFinishFailed'] = (errorInfo) => {
    console.log('Failed:', errorInfo);
};

function LoginView() {
    return (
        <div className="loginBox">
            <div style={{fontSize: "30px",margin:"40px 0"}}>DiZ React App</div>
            <Form
                name="basic"
                labelCol={{span: 8}}
                style={{maxWidth: 600}}
                initialValues={{remember: true}}
                onFinish={onFinish}
                onFinishFailed={onFinishFailed}
                autoComplete="off"
            >
                <Form.Item<FieldType>
                    name="username"
                    rules={[{required: true, message: 'Please input your username!'}]}
                >
                    <Input placeholder="用户名"/>
                </Form.Item>

                <Form.Item<FieldType>
                    name="password"
                    rules={[{required: true, message: 'Please input your password!'}]}
                >
                    <Input.Password placeholder="密码"/>
                </Form.Item>

                <Form.Item>
                    <Button type="primary" block htmlType="submit">
                        登录
                    </Button>
                </Form.Item>
            </Form>
        </div>
    );
}


export default LoginView;